<template>
  <div class="current-container">
    <a-row :gutter="24">
      <a-col>
        <h3>Windows驱动</h3>
      </a-col>
      <!-- 空-默认样式 -->
      <a-col v-show="winData.roaming.length == 0 && winData.direct.length == 0">
        <a-skeleton :loading="loading" active>
          <a-row :gutter="24">
            <a-col :span="6">
              <panel-temp></panel-temp>
            </a-col>
          </a-row>
        </a-skeleton>
      </a-col>
      <a-col class="title" v-show="winData.roaming.length > 0">
        <h4>
          <em>云打印驱动</em>
        </h4>
      </a-col>
      <a-col>
        <a-row :gutter="24">
          <a-col
            :span="6"
            :offset="i == 0 ? 0: 1"
            v-show="i < 3"
            v-for="(roaming, i) in winData.roaming"
            :key="i"
          >
            <panel-temp :data="roaming"></panel-temp>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="title" v-show="winData.direct.length > 0">
        <h4>
          <em>直接打印驱动</em>
        </h4>
      </a-col>
      <a-col>
        <a-row :gutter="24">
          <a-col
            :span="6"
            :offset="i == 0 ? 0: 1"
            v-show="i < 3"
            v-for="(direct, i) in winData.direct"
            :key="i"
          >
            <panel-temp :data="direct"></panel-temp>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row :gutter="24" :style="{ marginTop: '30px' }">
      <a-col>
        <h3>MacOS驱动</h3>
      </a-col>
      <!-- 空-默认样式 -->
      <a-col v-show="macData.roaming.length == 0 && macData.direct.length == 0">
        <a-skeleton :loading="loading" active>
          <a-row :gutter="24">
            <a-col :span="6">
              <panel-temp></panel-temp>
            </a-col>
          </a-row>
        </a-skeleton>
      </a-col>
      <a-col class="title" v-show="macData.roaming.length > 0">
        <h4>
          <em>云打印驱动</em>
        </h4>
      </a-col>
      <a-col>
        <a-row :gutter="24">
          <a-col
            :span="6"
            :offset="i == 0 ? 0: 1"
            v-show="i < 3"
            v-for="(roaming, i) in macData.roaming"
            :key="i"
          >
            <panel-temp :data="roaming"></panel-temp>
          </a-col>
        </a-row>
      </a-col>
      <a-col class="title" v-show="macData.direct.length > 0">
        <h4>
          <em>直接打印驱动</em>
        </h4>
      </a-col>
      <a-col>
        <a-row :gutter="24">
          <a-col
            :span="6"
            :offset="i == 0 ? 0: 1"
            v-show="i < 3"
            v-for="(direct, i) in macData.direct"
            :key="i"
          >
            <panel-temp :data="direct"></panel-temp>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { OsType, DriverType } from "@/utils/VEnum";
import PanelTemp from "./Panel.vue";
import { drive_pages } from "@/api/drive";
import { DriverType2Val } from "@/common/Enum2Val";
@Component({
  name: "Current",
  components: { PanelTemp }
})
export default class Current extends Vue {
  private winData: any = {};
  private macData: any = {};
  private DriverType2Val: any = DriverType2Val;
  private loading: boolean = false;

  initData() {
    this.winData = { direct: [], roaming: [] };
    this.macData = { direct: [], roaming: [] };
  }

  async initList() {
    this.initData();
    this.loading = true;
    const { data } = await drive_pages({ isNewest: true });
    this.loading = false;
    if (data.errNo == 0) {
      const { WIN, MAC } = OsType;
      const { DIRECT, ROAMING } = DriverType;
      data.item.forEach((item: any) => {
        switch (item.osType) {
          case WIN:
            if (item.driverType == DIRECT) {
              this.winData.direct.push(item);
            } else if (item.driverType == ROAMING) {
              this.winData.roaming.push(item);
            }
            break;
          case MAC:
            if (item.driverType == DIRECT) {
              this.macData.direct.push(item);
            } else if (item.driverType == ROAMING) {
              this.macData.roaming.push(item);
            }
            break;
        }
      });
    }
  }
  created() {
    this.initList();
  }
}
</script>

<style lang="less" scoped>
.current-container {
  padding-bottom: 20px;
}
.title {
  color: #333;
  margin: 20px 0 5px 0;
}
</style>
